<template>
  <!--用户添加&修改-->
  <div class="search">
    <f-form ref="form" :action="api.frontUser" :form-key="this.formItem.userId">
      <div v-if="isAdd">
        <f-form-item label="账户名" name="account" :rules="rules.required('账户不能为空',6)" :required="true"/>
        <f-form-item label="密码" name="password" type="password" :required="true" :rules="rules.required(6,10)" :validator="validateToNextPassword" :value.sync="formItem.password"/>
        <f-form-item label="确认密码" name="passwordConfirm" type="password" :required="true" :rules="rules.required(6,10)" :validator="compareToFirstPassword" :value.sync="formItem.passwordConfirm"/>
      </div>
      <f-form-item label="姓名" name="userName" :value="formItem.userName"/>
      <f-form-item label="昵称" name="nickName" :value="formItem.nickName"/>
      <f-form-item label="手机号" name="mobile" :value="formItem.mobile"/>
      <f-form-item label="生日" :required="true" type="date" name="birthday" :value="formItem.birthday"/>
      <f-form-item label="邮箱" name="email" :value="formItem.email"/>
      <f-form-item label="微信号" name="wechatNo" :value="formItem.wechatNo"/>
      <f-form-item label="状态" name="status" type="radio" v-if="loaded" value-key="value" label-key="label" :data="api.common.userStatus" :value="formItem.status"/>

      <f-form-item label="性别" name="sex" type="radio" v-if="loaded" :data="$dictData.sex" value-key="code" label-key="name" :value="String(formItem.sex)"/>
      <f-form-item label="所属区域" type="areaSelect" name="areaIds" :value="areaIds" v-if="loaded"></f-form-item>
      <f-form-item label="描述" name="userDesc" type="textarea" :value="formItem.userDesc"/>
      <f-form-item label="个性签名" name="motto" type="textarea" :value="formItem.motto"/>
    </f-form>
  </div>
</template>

<script>

  export default {
    name: 'userForm',
    props: {},
    data() {
      return {
        isAdd: false,
        areaIds: [],
        loaded: false,
        formItem: this.getFormItem()
      }
    },
    methods: {
      compareToFirstPassword(rule, value, callback) {
        if (value && value.length >= 6 && value !== this.formItem.password) {
          callback('2次密码不一致')
        } else {
          callback()
        }
      },
      validateToNextPassword(rule, value, callback) {
        const form = this.$refs.form.getForm()
        if (value) {
          form.validateFields(['passwordConfirm'], { force: 'change' })
        }
        callback()
      },
      getFormItem() {
        return {
          userId: '',
          userName: '',
          nickName: '',
          password: '',
          passwordConfirm: '',
          status: 1,
          proId: '',
          areaId: '',
          wechatNo: '',
          cityId: '',
          companyId: '',
          email: '',
          mobile: '',
          sex: '1',
          userType: 'USER',
          motto: '',
          userDesc: '',
          avatar: ''
        }
      },
      setData(data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        if (data && data.userId) {
          this.$refs.form.getDetails({ userId: data.userId }, (data) => {
            this.formItem = data
            this.areaIds = [this.formItem.proId, this.formItem.cityId, this.formItem.areaId]
            this.loaded = true

          })
        } else {
          this.loaded = true
          this.isAdd = true
        }
      },
      handleSubmit(callback) {
        this.$refs.form.handlerSubmit({ userType: 'USER' }, callback)
      }
    },
    created() {

    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
